<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洛阳文旅网 - 千年古都，牡丹花城</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 盒模型设置 */
            font-family: "楷体", "宋体", "Arial", sans-serif;
            /* 设置全局字体 */
        }
        
        html,body {
            height: 100%;
            margin: 0;
            padding: 0; /* 清除默认边距和内边距 */
            scroll-behavior: smooth; /* 平滑滚动效果 */
            color: #333;
            background-image: url(./img/背景3.jpg);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            padding-top: 100px; /* 为固定导航栏留出空间 */
        }

        /* 容器宽度限制 */
        .w {
            width: 100%;
            max-width: 1200px;
            margin: auto;
        }

        /* 固定导航栏样式 */
        .header {
            height: 60px;
            margin: 20px auto;
            background-color: rgba(0, 0, 0, 0.15);
            display: flex;  /*弹性盒子  flex-direction  决定盒子方向*/
            /*display:none;  不显示  visibility: hidden;  不显示
            隐藏元素还占空间            隐藏元素不占空间*/

            align-items: center;    /*垂直居中导航栏内容 */
            justify-content: space-between; /* 水平分布导航栏内容 */

            position: fixed;    /*相对于浏览器，固定导航栏*/
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;  /*确保导航栏在最上层*/
            padding: 0 20px;    /*内边距*/
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);  /*阴影效果*/
            transition: all 0.3s ease;  /*平滑过渡效果 */
            /*gap 元素之间的间距*/
        }

        /* 滚动后导航栏样式变化 */
        .header.scrolled {
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        /* 导航栏logo区域样式 */
        .logo {
            display: flex;
            align-items: center;
            height: 100%;
        }
        .logo img {
            height: 50px;
            margin-right: 20px;
            /*使logo与字体之间有一定的空隙*/
        }
        .logo img:first-child {
            margin-right: 0;
            /*设置了两个logo，使其紧密连接*/
        }

        /* 导航菜单样式 */
        .nav {
            padding: 10px;
        }

        .nav ul {
            list-style: none;
            /*去掉默认的列表样式*/
            display: flex;
            /* 水平排列导航菜单项 */
        }

        .nav ul li {
            margin-right: 20px;
            position: relative;
        }

        .nav ul li a {
            text-decoration: none;
            /*去掉链接下划线*/
            display: block;
            /*使链接占满整个li区域*/
            height: 44px;
            padding: 0 10px;
            line-height: 44px;
            /*将高度与行高设置相同，使内容垂直居中*/
            font-size: 16px;
            color: #beb7b7;
            font-weight: bold;
            transition: all 0.3s ease;   /*平滑过渡效果渐入渐出*/
            border-radius: 4px;     /*圆角效果*/
        }

        /* 导航链接鼠标悬停和按下鼠标未弹起状态     伪类*/
        .nav ul li a:hover,
        .nav ul li a.active {
            background-color: #3c4f55;
            color: white;
        }

        /* 菜单按钮样式，使界面实现当面板缩小时不会使导航栏中的内容溢出，
        而是直接变为菜单项*/
        .menu-toggle {
            display: none;  /* 默认隐藏菜单按钮 */
            cursor: pointer;    /* 鼠标悬停时显示手型 */
            color: white;
            font-size: 20px;
        }

        /* 页面中央大标题样式 */
        .overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 定位到页面中央 */
            transform: translate(-50%, -50%);
            /* 将元素向左上角移动自身宽度和高度的一半
            使其刚好能位于页面正中央 */
            font-size: 150px;
            color: rgb(193, 182, 182);
            text-shadow: 3px 3px 5px #000;
            font-weight: bold;
        }

        /* 轮播图容器样式 */
        .carousel-container {
            width: 100%;
            height: 500px;
            position: relative;
            overflow: hidden;/*隐藏超出容器的内容*/
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(27, 22, 22, 0.8);
        }

        /* 单个轮播图样式 */
        .carousel-slide {
            display: none;/*默认隐藏*/
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 已选中的轮播图 */
        .carousel-slide.active {
            display: block;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /*保持图片比例填充容器*/
        }

        /* 轮播图标题样式 */
        .carousel-caption {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background-color: rgba(139, 162, 162, 0.8);
            /*半透明背景*/
            padding: 15px;
            border-radius: 4px;/*圆角效果*/
        }
        /* 轮播图标题和描述文字的样式 */
        
        .carousel-caption h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: rgb(23, 20, 20);
            font-weight: bold;
        }
        .carousel-caption p {
            font-size: 17px;
            line-height: 1.5;
            color: rgb(23, 20, 20);
            font-weight: bold;
        }
        /* 轮播图控制按钮 */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
         .carousel-btn:hover {
            background: white;
            transform: translateY(-50%) scale(1.1);
        }
        /* 轮播图控制按钮样式 */
         .carousel-btn.prev {
            left: 2rem;
        }

        .carousel-btn.next {
            right: 2rem;
        }


        /* 轮播图导航总样式（右下小圆圈） */
        .carousel-nav {
            position: absolute;
            bottom: 25px;
            right: 30px;
            z-index: 10;/*使其显示在轮播图上方*/
        }
        /* 轮播图导航单个样式 */
        .carousel-indicator {
            display: inline-block;  /*使其水平排列*/
            width: 12px;
            height: 12px;
            border-radius: 50%; /*圆形*/
            background-color: rgba(255, 255, 255, 0.5);
            margin-left: 5px;
            cursor: pointer;    /* 鼠标悬停时显示手型 */
            transition: all 0.3s;   /*平滑过渡效果*/
        }

        /* 已选中的轮播图导航 */
        .carousel-indicator.active {
            background-color: rgb(196, 195, 166);
            transform: scale(1.3);  /* 鼠标悬停时放大效果 */
        }

        /* 主要内容区域样式 */
        .content {
            padding: 20px;
            max-width: 1200px;
            margin-top: 620px; /* 为轮播图和首页的洛阳大字留出空间 */
            margin-left: auto;
            margin-right: auto;
        }

        /* 各个section的通用样式 */
        section {
            margin-bottom: 40px;
            background: rgba(191, 192, 176, 0.9);
            padding: 30px;
            border-radius: 8px; /*圆角边框*/
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);   /*阴影效果*/
            transition: all 0.3s;   /*平滑过渡效果*/
        }
        

        /* 标题样式 */
        h2 {
            color: #935836;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #935836;
            /* 下划线效果 */
            font-size: 28px;
        }

        h3 {
            margin: 15px 0;
            font-size: 22px;
        }

        /* 段落文本样式 */
        p {
            color: #555;
            line-height: 1.8;
            margin-bottom: 15px;
            font-size: 17px;
            font-weight: 600;
        }

        /* 折叠面板样式 顶部外边距 */
        .accordion {
            margin-top: 20px;
        }

        /* 单个折叠面板项样式 */
        .accordion-item {
            margin-bottom: 10px;
            border-radius: 6px; /* 圆角边框 */
            overflow: hidden;   /* 隐藏内容溢出 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   /* 阴影效果 */
        }

        /* 折叠面板标题样式 */
        .accordion-header {
            background-color: #7d5727;
            color: white;
            padding: 15px 20px;
            cursor: pointer;    /* 鼠标悬停时显示手型 */
            display: flex;      /* 使用flex布局使标题内容水平分布 */
            justify-content: space-between; /* 水平分布标题内容 */
            align-items: center;
            font-size: 18px;
            transition: all 0.3s;   /* 平滑过渡效果 */
        }
        /* 鼠标悬停时的折叠面板标题样式 */
        .accordion-header:hover {
            background-color: #4f3913;
        }

        /* 折叠面板标题后的指示符号 */
        /*+表示未展开状态，-表示展开状态*/
        .accordion-header::after {
            /* 使用伪元素显示折叠面板的展开/收起状态 */
            content: '+';   /* 默认内容为+ */
            font-size: 24px;
            transition: all 0.3s;   /* 平滑过渡效果 */
        }

        /* 已选中的折叠面板标题 */
        .accordion-header.active::after {
            /* 当折叠面板被选中时，改变指示符号 */
            content: '-';   /* 已展开时内容为- */
        }

        /* 折叠面板内容区域样式 */
        .accordion-content {
            background-color: transparent;  /* 背景透明 */
            max-height: 0;
            overflow: hidden;   /* 隐藏内容溢出 */
            transition: max-height 0.3s ease-out;   /* 平滑过渡效果 */
        }
        /* 折叠面板内容 */
        .accordion-content-inner {
            padding: 20px;
        }

        /* 折叠面板里的内容样式 */
        .attraction-grid {
            display: grid;  /* 使用网格布局 */
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            /* 自动填充列，最小宽度为280px，最大宽度为1fr */
            /* 1fr表示占据剩余空间，使每个卡片在宽度足够时自动换行 */
            gap: 20px;  /* 网格间距 */
            margin-top: 20px;
        }
        /* 单个景点卡片样式 */
        .attraction-card {
            background: white;
            border-radius: 8px; /* 圆角边框 */
            overflow: hidden;   /* 隐藏内容溢出 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;    /* 平滑过渡效果 */
        }
        /* 鼠标悬停时的景点卡片样式 */
        .attraction-card:hover {
            transform: translateY(-5px);    /* 向上移动5px */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* 增加阴影效果 */
        }

        .attraction-image {
            width: 100%;
            height: 180px;
            object-fit: cover;  /* 保持图片比例填充容器 */
        }
        .route-image {
            width: 100%;
            height: 350px;
            object-fit: cover;  /* 保持图片比例填充容器 */
        }
        /* 景点信息区域样式 */
        .attraction-info {
            padding: 15px;  
        }

        .attraction-info h3 {
            color: #9c603e;
            margin-bottom: 10px;
        }

        .attraction-info p {
            color: #666;
            font-size: 15px;
            margin-bottom: 15px;
            font-weight: 800;
        }

        /* 了解更多按钮样式 */
        .btn {
            display: inline-block;  /* 使按钮成为块级元素 */
            padding: 8px 16px;
            background-color: #9c603e;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn:hover {
            background-color: #8f2222;
            transform: translateY(-2px);    /* 鼠标悬停时向上移动2px */
        }

        /* 文化，美食网格布局 */
        .culture-grid ,.food-grid , .season-grid {
            display: grid;  /* 使用网格布局 */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            /* 自动填充列，最小宽度为250px，最大宽度为1fr */
            gap: 20px;  /* 网格间距 */
            margin-top: 20px;
        }

        /* 单个卡片样式 */
        .culture-card,.food-card ,.season-card {
            background: white;
            border-radius: 8px; /* 圆角边框 */
            overflow: hidden;   /* 隐藏内容溢出 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .culture-image,.food-image {
            width: 100%;
            height: 180px;
            object-fit: cover;  /* 保持图片比例填充容器 */
        }

        .culture-info,.food-info {
            padding: 15px;
        }

        .culture-info h3.food-info h3 {
            color: #9c603e;
            margin-bottom: 10px;
        }

        .culture-info p ,.food-info p {
            color: #666;
            font-size: 15px;
            margin-bottom: 15px;
            font-weight: 800;
        }

        /* 页脚 */
        footer {
            background: rgba(191, 192, 176, 0.5);
            text-align: center;
            padding: 20px;
        }
        footer p {
            color: #f1eaea;
            
        }

        /* 响应式设计 - 移动端样式 */
        /* 当屏幕宽度小于950px时应用以下样式 */
        @media (max-width: 950px) {
            /* 显示移动端菜单按钮 */
            .menu-toggle {
                display: block; /* 显示菜单按钮 */
            }

            /* 默认隐藏导航菜单 */
            .nav ul {
                display: none;
                flex-direction: column; /* 垂直排列导航菜单项 */
                width: 50%; /* 设置导航菜单宽度 */
                background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 60px;
                left: 38%;
            }

            /* 选中状态的导航菜单 */
            .nav ul.active {
                display: flex;
            }

            .nav ul li {
                margin-right: 0;
                padding: 0;
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <!-- 固定导航栏 -->
    <div class="header">
        <div class="logo">
            <img src="./img/洛阳logo1.jpg" alt="洛阳logo">
            <img src="./img/洛阳logo2.jpg" alt="洛阳logo">
            <span style="color: white; font-size: 24px;">洛阳文旅</span>
        </div>

        <!-- 移动端菜单切换按钮 -->
        <div class="menu-toggle">☰ 菜单</div>
        
        <!-- 导航菜单 -->
        <div class="nav">
            <ul>
                <!--li 块元素 a 行内元素-->
                <li><a href="#home" class="active">首页</a></li>
                <li><a href="#culture">文化</a></li>
                <li><a href="#attractions">景点</a></li>
                <li><a href="#food">美食</a></li>
                <li><a href="#travel-guide">旅游指南</a></li>
                <li><a href="#about">关于我们</a></li>
            </ul>
        </div>
    </div>

    <!-- 页面中央大标题 -->
    <div class="overlay-text">洛<br>阳</div>



    <!-- 主要内容区域 -->
    <div class="content">
        <!-- 首页section -->
        <section id="home">
            <!-- 轮播图部分 -->
            <div class="carousel-container">
                <div class="carousel-slide active">
                    <img src="./img/龙门石窟.jpg" alt="龙门石窟">
                    <div class="carousel-caption">
                        <h3>龙门石窟</h3>
                        <p>世界文化遗产，中国四大石窟之一，展现了北魏至唐代佛教艺术的巅峰之作。</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="./img/白马寺.jpg" alt="白马寺">
                    <div class="carousel-caption">
                        <h3>白马寺</h3>
                        <p>中国第一座佛教寺院，被誉为"释源"和"祖庭"，是佛教传入中国的重要象征。</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="./img/老君山2.jpg" alt="老君山">
                    <div class="carousel-caption">
                        <h3>老君山</h3>
                        <p>道教名山，国家5A级旅游景区，以奇特的山形和丰富的植被闻名。</p>
                    </div>
                </div>
                <div class="carousel-slide">
                    <img src="./img/洛阳牡丹.jpg" alt="洛阳牡丹">
                    <div class="carousel-caption">
                        <h3>洛阳牡丹</h3>
                        <p>"洛阳地脉花最宜，牡丹尤为天下奇"，每年4月举办的中国洛阳牡丹文化节吸引无数游客。</p>
                    </div>
                </div>

                <!-- 控制按钮 -->
                <button class="carousel-btn prev">❮</button>
                <button class="carousel-btn next">❯</button>

                <!-- 轮播图导航指示器 -->
                <div class="carousel-nav">
                    <span class="carousel-indicator active" data-slide="0"></span>
                    <span class="carousel-indicator" data-slide="1"></span>
                    <span class="carousel-indicator" data-slide="2"></span>
                    <span class="carousel-indicator" data-slide="3"></span>
                </div>
            </div>
            <br>
            <h2>欢迎来到洛阳</h2>
            <p>洛阳，这座位于中原腹地的千年古都，拥有5000多年文明史、4000多年城市史、1500多年建都史。作为十三朝古都，洛阳见证了中华文明的辉煌历程，留下了无数珍贵的文化遗产。</p>
            <p>洛阳是华夏文明的发祥地之一，丝绸之路的东方起点，隋唐大运河的中心。这里不仅有龙门石窟、白马寺等世界文化遗产，还有牡丹花城的美誉，每年4月的牡丹文化节吸引着世界各地的游客。</p>
            <p>洛阳山水秀丽，北有邙山，南有龙门，伊、洛、瀍、涧四水穿城而过，形成了独特的山水园林城市风貌。老君山、白云山等自然景观与人文景观交相辉映，构成了洛阳丰富的旅游资源。</p>
        </section>

        <!-- 文化section -->
        <section id="culture">
            <h2>洛阳文化</h2>
            <div class="culture-grid">
                <!--河洛文化-->
                <div class="culture-card">
                    <img src="./img/河洛文化.jpg" alt="河洛文化" class="culture-image">     
                    <div class="culture-info">
                        <h3>河洛文化</h3>
                        <p>河洛文化是中华文明的重要组成部分，洛阳作为河洛文化的发源地之一，拥有丰富的历史遗存和文化积淀。</p>
                        <p>河洛文化以儒家思想为核心，强调仁、义、礼、智、信等道德规范，影响深远。洛阳的古城墙、宫殿遗址、碑刻等都是河洛文化的重要见证。</p>
                        <a href="#" class="btn">了解更多</a>
                    </div>
                </div>
                
                <!-- 牡丹文化 -->
                <div class="culture-card">
                    <img src="./img/牡丹文化.jpg" alt="牡丹文化" class="culture-image">
                    <div class="culture-info">
                        <h3>牡丹文化</h3>
                        <p>洛阳牡丹栽培始于隋，鼎盛于唐，宋时甲于天下。洛阳牡丹花朵硕大，品种繁多，花色奇绝，有红、白、粉、黄、紫、蓝、绿、黑及复色9大色系、10种花型、1000多个品种。</p>
                        <p>中国洛阳牡丹文化节前身为洛阳牡丹花会，始于1983年，2010年11月，经国务院、国家文化部正式批准升格为国家级文化盛会。</p>
                        <a href="./牡丹文化.html" class="btn" target="_blank">了解更多</a>    
                    </div>
                </div>

                

                <!-- 佛教文化 -->
                <div class="culture-card">
                    <img src="./img/佛教文化.jpg" alt="佛教文化" class="culture-image">
                    <div class="culture-info">
                        <h3>佛教文化</h3>
                        <p>洛阳是中国佛教文化的发源地之一，白马寺是中国第一座佛教寺院，被誉为中国佛教的"释源"和"祖庭"。</p>
                        <p>北魏时期，洛阳成为全国佛教文化中心，寺院林立，僧尼众多。龙门石窟就是这一时期佛教文化繁荣的见证。</p>
                        <p>唐代，洛阳仍是重要的佛教文化中心，武则天时期佛教文化达到鼎盛。今天，洛阳仍有众多佛教寺院和佛教文化遗存。</p>
                        <a href="#" class="btn">了解更多</a>
                    </div>
                </div>

                <!-- 手工艺文化 -->
                <div class="culture-card">
                    <img src="./img/手工艺文化.jpg" alt="手工艺文化" class="culture-image">
                    <div class="culture-info">
                        <h3>手工艺文化</h3>
                        <p>洛阳手工艺品种类繁多，技艺精湛，代表性有洛阳剪纸、洛阳瓷器、洛阳刺绣等。</p>
                        <p>洛阳剪纸以其精美的图案和生动的表现形式而闻名，常用于节庆装饰和民间艺术表演。洛阳瓷器以其独特的釉色和造型受到喜爱。</p>
                        <a href="#" class="btn">了解更多</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 景点section -->
        <section id="attractions">
            <h2>洛阳主要景点</h2>
            <div class="accordion">
                <!-- 折叠面板项 - 世界文化遗产 -->
                <div class="accordion-item">
                    <div class="accordion-header">世界文化遗产</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/龙门石窟.jpg" alt="龙门石窟" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>龙门石窟</h3>
                                        <p>世界文化遗产，中国四大石窟之一，开凿于北魏孝文帝年间，历经东魏、西魏、北齐、隋、唐、五代、宋等朝代连续大规模营造达400余年之久。</p>
                                        <a href="./龙门石窟.html" class="btn" target="_blank">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/白马寺.jpg" alt="白马寺" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>白马寺</h3>
                                        <p>中国第一座佛教寺院，建于东汉永平十一年(公元68年)，是佛教传入中国后兴建的第一座官办寺院，被誉为中国佛教的"释源"和"祖庭"。</p>
                                        <a href="./白马寺.html" class="btn" target="_blank">了解更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 皇家园林与古迹 -->
                <div class="accordion-item">
                    <div class="accordion-header">皇家园林与古迹</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/九州池.jpg" alt="九州池" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>九州池</h3>
                                        <p>隋唐洛阳城宫城区的重要组成部分，始建于隋代，唐宋时期继续沿用。池中有岛，岛上建有亭台楼阁，是隋唐时期皇室贵族休闲娱乐的重要场所。</p>
                                        <a href="./九州池.html" class="btn" target="_blank">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/天堂明堂.jpg" alt="天堂明堂" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>天堂明堂</h3>
                                        <p>武则天时期的皇宫核心建筑群，明堂是政令颁布中心，天堂是礼佛堂。现代重建采用了传统工艺与现代技术相结合的方式，保留了历史风貌。</p>
                                        <a href="./天堂明堂.html" class="btn" target="_blank">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/应天门1.jpg" alt="应天门" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>应天门</h3>
                                        <p>唐代洛阳城的正门，始建于隋大业元年(605年)，是朝廷举行登基、改元、大赦、宴会等外朝大典的场所，有"天下第一门"之称。</p>
                                        <a href="#" class="btn">了解更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 自然风光 -->
                <div class="accordion-item">
                    <div class="accordion-header">自然风光</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/老君山2.jpg" alt="老君山" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>老君山</h3>
                                        <p>道教名山，国家5A级旅游景区，海拔2217米，是秦岭余脉八百里伏牛山的主峰。因道教始祖老子归隐修炼于此而得名。</p>
                                        <a href="./老君山.html" class="btn" target="_blank">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/白云山.jpg" alt="白云山" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>白云山</h3>
                                        <p>国家5A级旅游景区，地跨长江、黄河、淮河三大流域，融山、石、水、洞、林、草、花、鸟、兽为一体，被誉为"自然博物馆"。</p>
                                        <a href="#" class="btn">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/重渡沟.jpg" alt="重渡沟" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>重渡沟</h3>
                                        <p>国家4A级旅游景区，位于洛阳市嵩县境内，是一个以峡谷、瀑布、溶洞为主的自然风景区，素有"中原第一峡谷"之称。</p>
                                        <a href="#" class="btn">了解更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 博物馆与文化 -->
                <div class="accordion-item">
                    <div class="accordion-header">博物馆与文化</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/洛阳博物馆.jpg" alt="洛阳博物馆" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>洛阳博物馆</h3>
                                        <p>国家一级博物馆，创建于1958年，馆藏文物40余万件，展出文物1.1万余件，是了解洛阳历史文化的重要窗口。</p>
                                        <a href="#" class="btn">了解更多</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/天子驾六博物馆.jpg" alt="天子驾六博物馆" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>天子驾六博物馆</h3>
                                        <p>建于2002年，是在东周王城遗址上修建的专题博物馆，展示了东周时期大型车马坑，出土了"天子驾六"等珍贵文物。</p>
                                        <a href="#" class="btn">了解更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        

        <!-- 美食section -->
        <section id="food">
            <h2>洛阳美食</h2>
            <div class="food-grid">
                <div class="food-card">
                    <img src="./img/洛阳水席.jpg" alt="洛阳水席" class="food-image">
                    <div class="food-info">
                        <h3>洛阳水席</h3>
                        <p>洛阳传统名宴，与龙门石窟、洛阳牡丹并称"洛阳三绝"。水席始于唐代，已有1000多年的历史，全部热菜皆有汤-汤汤水水。</p>
                        <p>洛阳水席的特点是有荤有素、选料广泛、可简可繁、味道多样，酸、辣、甜、咸俱全，舒适可口。</p><br>
                        <a href="./洛阳水席.html" class="btn" target="_blank">了解更多</a>
                    </div>
                </div>
                <div class="food-card">
                    <img src="./img/牛肉汤.jpg" alt="牛肉汤" class="food-image">
                    <div class="food-info">
                        <h3>洛阳牛肉汤</h3>
                        <p>洛阳人早餐的首选，有"上午一碗汤，神仙也不当"的说法。洛阳牛肉汤选料讲究，用牛骨头熬汤，煮牛肉时必须浸泡血污，内脏清洗干净。</p>
                        <br>
                        <p>喝牛肉汤时，可以搭配饼丝或油旋，是洛阳最地道的早餐吃法。</p>
                        <br>
                        <a href="#" class="btn">查看推荐店铺</a>
                    </div>
                </div>
                <div class="food-card">
                    <img src="./img/不翻汤.jpg" alt="不翻汤" class="food-image">
                    <div class="food-info">
                        <h3>不翻汤</h3>
                        <p>洛阳传统名吃，已有120多年的历史。不翻汤名字的由来有两种说法：一是汤中不翻饼；二是客人点餐后，厨师直接将饼放入汤中，无需翻炒。</p>
                        <p>不翻汤配料丰富，有绿豆粉、胡椒、味精、酱油、醋、木耳、粉丝、海带、虾皮、紫菜、韭菜、锦珍、食盐等。</p>
                        <a href="#" class="btn">查看推荐店铺</a>
                    </div>
                </div>
                <div class="food-card">
                    <img src="./img/浆面条.jpg" alt="浆面条" class="food-image">
                    <div class="food-info">
                        <h3>浆面条</h3>
                        <p>洛阳传统名吃，又称浆饭，是洛阳民众的传统食品。浆面条的主料是面条，但配料是关键，因为煮浆面条的不是常用的清水，而是一种特制的酸味豆浆。</p>
                        <p>浆面条制作简单，成本低、味道美、易于消化，因而自古以来流传不衰，成为洛阳地区妇孺皆知的地方美食。</p>
                        <a href="#" class="btn">查看推荐店铺</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 旅游指南section -->
        <section id="travel-guide">
            <h2>洛阳旅游指南</h2>
            <div class="accordion">

                <!-- 折叠面板项 - 最佳旅游时间 -->
                <div class="accordion-item">
                    <div class="accordion-header">最佳旅游时间</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="season-grid">
                                <div class="season-card">
                                    <img src="./img/春季.jpg" alt="春季" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>春季（3月-5月）</h3>
                                        <p>洛阳春季气候温和，适合赏花，尤其是4月的牡丹花会，吸引了大量游客。</p>
                                        <p><strong>推荐活动：</strong>参加洛阳牡丹文化节，游览龙门石窟、白马寺等景点。</p>
                                        <p><strong>注意事项：</strong>春季天气多变，建议携带雨具。</p>
                                    </div>
                                </div>
                                <div class="season-card">
                                    <img src="./img/夏季.jpg" alt="夏季" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>夏季（6月-8月）</h3>
                                        <p>洛阳夏季较热，但山水景区如老君山、白云山等避暑胜地非常适合游玩。</p>
                                        <p><strong>推荐活动：</strong>登山、避暑、游泳等。</p>
                                        <p><strong>注意事项：</strong>注意防晒和补水，避免中暑。</p>
                                    </div>
                                </div>
                                <div class="season-card">
                                    <img src="./img/秋季.jpg" alt="秋季" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>秋季（9月-11月）</h3>
                                        <p>洛阳秋季气候宜人，适合户外活动，尤其是赏红叶。</p>
                                        <p><strong>推荐活动：</strong>游览老君山、白云山等自然景区，欣赏秋色。</p>
                                        <p><strong>注意事项：</strong>早晚温差大，建议携带外套。</p>
                                    </div>
                                </div>
                                <div class="season-card">
                                    <img src="./img/冬季.jpg" alt="冬季" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>冬季（12月-2月）</h3>
                                        <p>洛阳冬季寒冷，但雪景非常美丽，适合滑雪和温泉。</p>
                                        <p><strong>推荐活动：</strong>滑雪、泡温泉、游览冰雪景观。</p>
                                        <p><strong>注意事项：</strong>注意保暖，防止冻伤。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 交通指南 -->
                <div class="accordion-item">
                    <div class="accordion-header">交通指南</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/airport.jpg" alt="洛阳机场" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>飞机</h3>
                                        <p>洛阳北郊机场位于洛阳市北郊邙山，距市区10公里，已开通北京、上海、广州、深圳、成都、重庆、杭州、昆明、大连、青岛、厦门、沈阳、天津、南宁等城市的航班。</p>
                                        <p><strong>机场大巴：</strong>机场至市区有多条线路，票价约15-20元</p>
                                        <p><strong>出租车：</strong>约30-40元可到达市区</p>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/train.jpg" alt="火车站" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>火车</h3>
                                        <p>洛阳有洛阳站、洛阳龙门站(高铁站)、洛阳东站等火车站。洛阳站是普通列车的主要停靠站，洛阳龙门站是高铁和动车的主要停靠站。</p>
                                        <p><strong>洛阳站：</strong>位于市区，多条公交线路可达主要景点</p>
                                        <p><strong>洛阳龙门站：</strong>高铁站，有地铁和公交连接市区</p>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/bus.jpg" alt="洛阳公交" class="attraction-image">
                                    <div class="attraction-info">
                                        <h3>市内交通</h3>
                                        <p>洛阳公交系统发达，主要景点都有公交车到达。也可以选择出租车或网约车。共享单车在市区也很方便。</p>
                                        <p><strong>地铁：</strong>洛阳地铁1，2号线已开通，连接洛阳站、王城公园、应天门、龙门石窟等主要站点</p>
                                        <p><strong>公交：</strong>票价1-1.5元，可使用支付宝扫码乘车</p>
                                        <p><strong>共享单车：</strong>摩拜、哈啰等品牌遍布市区</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                            

                <!-- 折叠面板项 - 住宿推荐 -->
                <div class="accordion-item">
                    <div class="accordion-header">住宿推荐</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <p>洛阳住宿选择丰富，从经济型酒店到五星级酒店应有尽有。主要住宿区域有：</p>
                            <p><strong>老城区</strong>：靠近丽景门、洛邑古城等景点，古色古香，适合体验洛阳古城风貌。</p>
                            <p><strong>西工区</strong>：商业中心，交通便利，靠近王城公园、天子驾六博物馆等景点。</p>
                            <p><strong>洛龙区</strong>：新区，靠近龙门石窟、洛阳博物馆等景点，有多家星级酒店。</p>
                            <p><strong>牡丹广场周边</strong>：靠近牡丹公园、周山森林公园，环境优美。</p>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 旅游线路推荐 -->
                <div class="accordion-item">
                    <div class="accordion-header">旅游线路推荐</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <div class="attraction-grid">
                                <div class="attraction-card">
                                    <img src="./img/经典三日游.jpg" alt="经典三日游" class="route-image">
                                    <div class="attraction-info">
                                        <h3>经典三日游</h3>
                                        <p><strong>Day 1:</strong> 龙门石窟 → 白马寺 → 洛邑古城</p>
                                        <p><strong>Day 2:</strong> 天子驾六博物馆 → 王城公园 → 隋唐洛阳城国家遗址公园</p>
                                        <p><strong>Day 3:</strong> 老君山 → 白云山</p>
                                        <p><strong>特色：</strong>涵盖洛阳最精华景点，适合首次来洛游客</p>
                                        <a href="#" class="btn">查看详细行程</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/自然风光游.jpg" alt="自然风光游" class="route-image">
                                    <div class="attraction-info">
                                        <h3>自然风光游</h3>
                                        <p><strong>Day 1:</strong> 老君山 → 鸡冠洞</p>
                                        <p><strong>Day 2:</strong> 白云山 → 重渡沟</p>
                                        <p><strong>Day 3:</strong> 龙峪湾 → 养子沟</p>
                                        <p><strong>特色：</strong>尽享洛阳山水美景，适合自然爱好者</p>
                                        <a href="#" class="btn">查看详细行程</a>
                                    </div>
                                </div>
                                <div class="attraction-card">
                                    <img src="./img/文化深度游.jpg" alt="文化深度游" class="route-image">
                                    <div class="attraction-info">
                                        <h3>文化深度游</h3>
                                        <p><strong>Day 1:</strong> 洛阳博物馆 → 天子驾六博物馆 → 关林庙</p>
                                        <p><strong>Day 2:</strong> 白马寺 → 玄奘故里 → 千唐志斋</p>
                                        <p><strong>Day 3:</strong> 龙门石窟 → 香山寺 → 白园</p>
                                        <p><strong>特色：</strong>深入了解洛阳历史文化，适合文化爱好者</p>
                                        <a href="#" class="btn">查看详细行程</a>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 折叠面板项 - 注意事项 -->
                <div class="accordion-item">
                    <div class="accordion-header">注意事项</div>
                    <div class="accordion-content">
                        <div class="accordion-content-inner">
                            <p>1. 洛阳夏季较热，注意防晒；冬季较冷，注意保暖。</p>
                            <p>2. 牡丹文化节期间(4月)游客较多，建议提前预订酒店和门票。</p>
                            <p>3. 参观龙门石窟等石窟寺时，注意保护文物，不要触摸壁画和雕像。</p>
                            <p>4. 洛阳美食以咸、辣为主，不习惯的可以提前告知服务员。</p>
                            <p>5. 洛阳方言属于中原官话，与普通话接近，交流基本无障碍。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我们section -->
        <section id="about">
            <h2>关于我们</h2>
            <p>洛阳文旅网是洛阳市文化广电和旅游局官方指导的旅游服务平台，致力于为游客提供全面、准确、及时的洛阳旅游信息。</p>
            <p>我们的使命是：</p>
            <ul style="margin-left: 30px; margin-bottom: 15px; color: #555;">
                <li>传播洛阳文化，展示洛阳形象</li>
                <li>提供权威的旅游信息</li>
                <li>搭建游客与旅游企业的桥梁</li>
                <li>推动洛阳旅游业的发展</li>
            </ul>
            <p>我们的服务内容包括：</p>
            <ul style="margin-left: 30px; margin-bottom: 15px; color: #555;">
                <li>洛阳旅游景点介绍</li>
                <li>洛阳旅游攻略</li>
                <li>洛阳美食推荐</li>
                <li>洛阳住宿信息</li>
                <li>洛阳旅游线路推荐</li>
                <li>洛阳旅游政策咨询</li>
            </ul>
            <p>如果您有任何关于洛阳旅游的问题或建议，欢迎通过以下方式联系我们：</p>
            <p>电话：0379-12345</p>
            <p>邮箱：luoyangwenlv@163.com</p>
            <p>地址：河南省洛阳市洛龙区开元大道228号</p>
        </section>
    </div>
    
     <!-- 页脚 -->
    <footer>
        <p>© 2025 洛阳文旅网 版权所有</p>
        <p>© 2025 软件工程张诗佳 版权所有 | 2410250403</p>
    </footer>

    <script>
        // 导航栏响应式处理
        const menuToggle = document.querySelector('.menu-toggle');// 获取菜单切换按钮元素
        const nav = document.querySelector('.nav');// 获取导航菜单元素

        // 菜单切换按钮点击事件
        menuToggle.addEventListener('click', () => {
            nav.classList.toggle('active');     // 切换导航菜单的active类
        });

        // 导航栏滚动效果 - 根据滚动位置高亮对应导航链接
        function handleScroll() {
            const sections = document.querySelectorAll('section');    // 获取所有section元素
            const navLinks = document.querySelectorAll('.nav ul li a');// 获取所有导航链接
            // 初始化当前section的ID
            let currentSectionId = '';

            // 遍历所有section，找到当前可视区域的section
            sections.forEach(section => {
                const sectionTop = section.offsetTop - 100; // 减去100像素作为偏移
                if (window.scrollY >= sectionTop) {// 检查当前滚动位置是否在section顶部之下
                    currentSectionId = section.id; // 更新当前section的ID
                }
            });

            // 遍历所有导航链接，设置active类
            navLinks.forEach(link => {// 遍历所有导航链接
                // 如果链接的href属性与当前section的ID匹配，则添加active类
                if (link.getAttribute('href') === `#${currentSectionId}`) {
                    // 检查链接的href是否与当前section的ID匹配
                    link.classList.add('active');// 添加active类
                } else {
                    link.classList.remove('active');// 否则移除active类
                }
            });
        }

        // 添加滚动事件监听
        window.addEventListener('scroll', handleScroll);// 当页面滚动时执行handleScroll函数

        // 初始化时执行一次，确保页面加载时高亮正确的导航链接
        handleScroll();

        // 移动端菜单切换
        document.querySelector('.menu-toggle').addEventListener('click', function () {
            // 切换导航菜单的显示状态
            document.querySelector('.nav ul').classList.toggle('active');
            // 切换菜单按钮的active状态
        });

        // 折叠面板功能
        const accordionHeaders = document.querySelectorAll('.accordion-header');
        // 为每个折叠面板头添加点击事件
        accordionHeaders.forEach(header => {
            // 为每个折叠面板头添加点击事件监听器
            header.addEventListener('click', function () {
                // 切换当前折叠面板头的active状态
                this.classList.toggle('active');
                // 获取当前折叠面板头下的内容元素
                const content = this.nextElementSibling;
                // 切换内容的最大高度
                // 如果内容的最大高度已设置，则清除它，否则设置为内容的实际高度
                if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                } else {
                    content.style.maxHeight = content.scrollHeight + 'px';// 设置内容的最大高度为其实际高度
                }
            });
        });

        // 默认展开第一个折叠面板
        document.querySelector('.accordion-header').click();

        // 轮播图功能
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-slide');
        const indicators = document.querySelectorAll('.carousel-indicator');
        const prevBtn = document.querySelector('.carousel-btn.prev');
        const nextBtn = document.querySelector('.carousel-btn.next');
        const totalSlides = slides.length;
        let slideInterval;
        

        // 显示指定索引的幻灯片
        function showSlide(n) {
            // 清除所有幻灯片和指示器的active类
            slides.forEach(slide => slide.classList.remove('active'));
            indicators.forEach(indicator => indicator.classList.remove('active'));

            // 计算正确的幻灯片索引
            currentSlide = (n + totalSlides) % totalSlides;
            
            // 添加active类到当前幻灯片和指示器
            slides[currentSlide].classList.add('active');
            indicators[currentSlide].classList.add('active');
        }

        // 显示下一张幻灯片
        function nextSlide() {
            showSlide(currentSlide + 1);
        }

        // 显示上一张幻灯片
        function prevSlide() {
            showSlide(currentSlide - 1);
        }

        // 开始自动轮播
        function startAutoPlay() {
            // 先清除现有的定时器（防止重复）
            if (slideInterval) clearInterval(slideInterval);
            // 设置新的定时器
            slideInterval = setInterval(nextSlide, 3000);
        }

        // 停止自动轮播
        function stopAutoPlay() {
            if (slideInterval) clearInterval(slideInterval);
        }

        // 初始化轮播图
        function initCarousel() {
            showSlide(0);
            startAutoPlay();
            
            // 为指示器添加点击事件
            indicators.forEach(indicator => {
                indicator.addEventListener('click', function() {
                    stopAutoPlay();
                    const slideIndex = parseInt(this.getAttribute('data-slide'));
                    showSlide(slideIndex);
                    // 3秒后重新开始自动轮播
                    setTimeout(startAutoPlay, 3000);
                });
            });
            

            // 为上一张按钮添加点击事件
            prevBtn.addEventListener('click', function () {
                stopAutoPlay();
                prevSlide();
                setTimeout(startAutoPlay, 3000);
            });

            // 为下一张按钮添加点击事件
            nextBtn.addEventListener('click', function () {
                stopAutoPlay();
                nextSlide();
                setTimeout(startAutoPlay, 3000);
            });

            // 鼠标悬停时暂停轮播
            document.querySelector('.carousel-container').addEventListener('mouseenter', stopAutoPlay);
            // 鼠标离开时恢复轮播
            document.querySelector('.carousel-container').addEventListener('mouseleave', startAutoPlay);
        }

        // 当DOM加载完成后初始化轮播图
        document.addEventListener('DOMContentLoaded', initCarousel);

        // 响应式调整 - 窗口大小变化时重新计算
        window.addEventListener('resize', function () {
            // 可以在这里添加响应式调整代码
            // 例如重新计算元素尺寸等
        });
    </script>
</body>

</html>